<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" @deleta="deleteDatas" @search="search" @addForm="addForm" @resizeTable="resizeTable" />
    <div ref="main" class="v-flex-elastic">
      <el-table
        v-if="height>0"
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        :default-expand-all="true"
        row-key="id"
        :height="height"
        tooltip-effect="dark"
        @selection-change="handleTagChange">
        <el-table-column
          align="center"
          type="selection"
          width="50" />
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50" />
        <el-table-column
          prop="companyName"
          align="left"
          width="300"
          show-overflow-tooltip
          label="公司名称" />
        <el-table-column
          prop="companyCode"
          align="center"
          show-overflow-tooltip
          label="公司编码" />
        <el-table-column
          prop="orderNo"
          align="center"
          show-overflow-tooltip
          label="排序号" />
        <el-table-column
          prop="companyType"
          align="center"
          show-overflow-tooltip
          label="公司类型" />
        <el-table-column
          prop="creditCode"
          align="center"
          show-overflow-tooltip
          label="社会信用代码" />
        <el-table-column
          prop="legalUser"
          align="center"
          show-overflow-tooltip
          label="法定代表人" />
        <el-table-column
          prop="buildTime"
          align="center"
          show-overflow-tooltip
          label="成立日期" />
        <el-table-column
          prop="status"
          align="center"
          show-overflow-tooltip
          label="启动状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status===1">已启动</span>
            <span v-else>未启动</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="120"
          class-name="small-padding fixed-width">
          <template #header>
            操作
            <el-dropdown :hide-on-click="false">
              <i class="el-icon-s-operation columnSetIco" />
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group v-model="tableColumnCheck">
                  <el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :key="item" :label="item" />
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="{row ,$index}">
            <el-button
              class="el-icon-defined"
              size="mini"
              icon="el-icon-view"
              @click="view(row)" />
            <el-button
              class="el-icon-defined"
              size="mini"
              icon="el-icon-edit"
              @click="updateForm(row,$index)" />
            <el-button
              class="el-icon-defined"
              size="mini"
              icon="el-icon-delete"
              @click="deleteData(row,$index)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="page-box">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList" />
    </div> -->
    <base-dialog
      class="dictionary-type-dialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @open="beforeOpenDialog"
      @updateData="updateData">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        :disabled="dialog.disabled"
        label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司编码" prop="companyCode">
              <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.companyCode"
                disabled />
              <el-input v-else v-model="temp.companyCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="companyName">
              <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.companyName"
                disabled />
              <el-input v-else v-model="temp.companyName" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级公司" prop="pId">
              <select-tree
                ref="tree_box1"
                v-model="temp.pId"
                :options="deptTreeData"
                :props="defaultProps" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司类型" prop="companyType">
              <el-select v-model="temp.companyType">
                <el-option
                  v-for="item in companyType"
                  :key="item.id"
                  :label="item.dicName"
                  :value="item.id" />
              </el-select>
            <!--  <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.companyType"
                disabled />
              <el-input v-else v-model="temp.companyType" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社会信用代码" prop="creditCode">
              <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.creditCode"
                disabled />
              <el-input v-else v-model="temp.creditCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="legalUser">
              <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.legalUser"
                disabled />
              <el-input v-else v-model="temp.legalUser" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成立日期" prop="buildTime">
              <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.buildTime"
                disabled />
              <el-input v-else v-model="temp.buildTime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序号" prop="orderNo">
              <el-input
                v-if="dialogStatus == 'update'"
                v-model="temp.orderNo"
                disabled />
              <el-input v-else v-model="temp.orderNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="status">
              <el-switch v-model="temp.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <!--<el-col :span="24">
            <el-form-item label="备注信息" prop="memo">
              <el-input v-model="temp.memo" />
            </el-form-item>
          </el-col>-->
        </el-row>
      </el-form>
    </base-dialog>
    <!-- <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false">
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="!disabled"
          type="primary"
          @click="dialogStatus==='create'?addData():updateData()">
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { company, dictionary } from '@/api/sysm'
import { getList, saveOrUpdate, deleteById } from '@/api/dsc/sysm/organization/company'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DscType',
  mixins: [tableMixin],
  data() {
    return {
      multipleSelection: [],
      height: 0, // table高度
      tableData: [], // 表格数据
      deptTreeData: [],
      defaultProps: {
        parent: 'pId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'companyName', // 标签显示
        children: 'children' // 子级
      },
      listQuery: {// 搜索条件
        keyName: '',
        page: 1,
        size: 20
      },
      filterData: {
        companyName: {
          key: 'companyName',
          type: 'input',
          title: '公司名称',
          placeholder: '请输入公司名称'
        },
        status: {
          key: 'status',
          type: 'status',
          title: '是否启用',
          options: [
            {
              label: 1,
              value: '是'
            },
            {
              label: 0,
              value: '否'
            }
          ]
        }
        // keyContent: {
        //   key: 'keyContent',
        //   type: 'input',
        //   title: '字典内容',
        //   placeholder: '请输入字典内容'
        // },
        // keyBz: {
        //   key: 'keyBz',
        //   type: 'input',
        //   title: '备注',
        //   placeholder: '请输入备注',
        //   width: '450px'
        // }
      },
      platformOptions: [], // 所属平台option
      total: 0,
      textMap: {
        update: '编辑',
        view: '查看',
        create: '添加'
      },
      dialogFormVisible: false, // 弹窗开关
      dialogStatus: '', // 弹窗类型（添加、查看、编辑）
      dialog: {
        visible: false,
        title: '',
        loading: false,
        disabled: false
      },
      temp: {},
      tempForm: {// 弹窗表单
      },
      rowIndex: null,
      rules: {},
      rulesModel: {
        dtName: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtCode: [{ required: true, message: '必填', trigger: 'blur' },
          { min: 1, message: '大于1个字符', trigger: 'blur' },
          { max: 20, message: '小于20个字符', trigger: 'blur' }],
        dtDec: [{ max: 255, message: '小于255个字符', trigger: 'blur' }]
      },
      listLoading: false,
      disabled: false, // 是否禁止表单操作
      tableColumnCheck: ['公司名称', '公司编码'],
      checkList: ['公司名称', '公司编码'],
      tableColumnCheckLists: [
        { label: '公司名称', prop: 'companyName', ispass: true },
        { label: '公司编码', prop: 'companyCode', ispass: true }
      ]
    }
  },

  watch: {
    tableColumnCheck(newVal) {
      if (newVal) {
        var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) // 未选中
        this.tableColumnCheckLists.map(i => {
          if (arr.indexOf(i.label) !== -1) {
            i.ispass = false
          } else {
            i.ispass = true
          }
        })
      }
    }
  },
  created() {
    this.temp = Object.assign({}, this.tempForm)
    this.getList()
    this.companys()
  },
  methods: {
    companys() {
      dictionary({ dicCode: 'CompanyType' }).then(response => {
        this.companyType = response.data
      })
      getList(this.listQuery).then(response => {
        this.deptTreeData = response.data
      })
    },
    // 查询列表
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.tableData = response.data
        // this.total = response.data.total
        // // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0 * 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 搜索
    search() {
      this.listQuery.page = 1
      this.getList()
    },
    // 添加
    addForm() {
      // this.disabled = false
      this.temp = Object.assign({}, this.tempForm)
      // this.dialogStatus = 'create'
      // this.dialogFormVisible = true
      this.rules = Object.assign({}, this.rulesModel)
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '添加',
        loading: false,
        disabled: false
      })
    },
    // 添加数据
    // addData() {
    //   this.validate().then(() => {
    //     this.saveOrUpdate(this.temp, 1)
    //   })
    // },
    // 查看
    view(row) {
      // this.disabled = true
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'view'
      this.rules = {}
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '查看',
        loading: false,
        disabled: true
      })
    },
    // 编辑
    updateForm(row, $index) {
      // this.disabled = false
      this.rowIndex = $index
      this.temp = Object.assign({}, row) // copy obj
      // this.dialogStatus = 'update'
      this.rules = Object.assign({}, this.rulesModel)
      // this.dialogFormVisible = true
      this.dialog = Object.assign({}, this.dialog, {
        visible: true,
        title: '编辑',
        loading: false,
        disabled: false
      })
    },
    // 编辑数据
    updateData() {
      this.validate().then(() => {
        this.saveOrUpdate(this.temp)
      })
    },
    // type 1 添加，2 编辑
    saveOrUpdate(params, type) {
      const param = Object.assign({}, params)
      // param.status = param.status ? 1 : 0
      // param.isPub = param.isPub ? 1 : 0
      // param.isSystem = param.isSystem ? 1 : 0
      saveOrUpdate(param).then(response => {
        // response.data.status = !!response.data.status
        // response.data.isPub = !!response.data.isPub
        // response.data.isSystem = !!response.data.isSystem
        if (this.dialog.title === '添加') {
          this.tableData.unshift(response.data)
          this.total++
        } else {
        //   Object.assign(this.tableData[this.rowIndex], response.data)
        }
        this.getList()
        this.notifiySuccess('保存成功!')
        this.dialog.visible = false
      })
    },
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 启用、停用,是否系统
    enable(row, $index) {
      this.rowIndex = $index
      this.saveOrUpdate(row, 2)
    },
    // 删除
    deleteData(row, $index) {
      this.confirmBox('确定删除?').then(() => {
        deleteById(row.id).then(response => {
          this.notifiySuccess('删除成功!')
          // this.tableData.splice($index, 1)
          // this.total--
          this.getList()
        })
      }).catch(() => {

      })
    },
    // 批量删除
    handleTagChange(val) {
      this.multipleSelection = val
    },
    deleteDatas() {
      const ids = []
      for (const i of this.multipleSelection) {
        // ids += ',' + i.id
        ids.push(i.id)
      }
      // ids = ids.substring(1)

      if (!ids) {
        Message({
          message: '请至少选择一条数据',
          type: 'error',
          duration: 3 * 1000
        })
        return
      }
      let c = 0
      this.confirmBox('确定删除?').then(() => {
        ids.forEach(item => {
          deleteById(item).then(response => {
            c++
            if (ids.length === c) {
              this.notifiySuccess('删除成功!')
              this.getList()
            }
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>
